import {
    ProColumns,
    ProForm,
    ProFormItem,
    ProFormText,
    ProFormTextArea,
    ProFormUploadButton,
    ProTable
} from '@ant-design/pro-components';
import {message, Modal, UploadProps,Image} from 'antd';
import React, { PropsWithChildren } from 'react';
import {addVideo} from "@/services/videoService";
import {PostType} from "@/models/post";
import {uploadImage, uploadVideo} from "@/services/fileService";

interface CreateModalProps {
    modalVisible: boolean;
    videoData:VideoType.Video;
    onInitData: () => void;
    onCancel: () => void;
}

const query:VideoType.VideoAddRequest = {
    videoThumbnailUrl:"",
    videoFileUrl: "",
    text:""
}


/**
 * 视频上传
 * @param options
 */
const videoUpload = (options: any) => {
    console.log(options.file)
    let formData = new FormData();
    formData.append("file", options.file);

    const data: PostType.PostPhotoRequest = {
        biz: 'user_video',
        file: formData.get("file")
    }

    uploadVideo(data).then(res => {
        query.videoFileUrl = res.data;
        options.onSuccess(res, options.file);
    }).catch(err => {
        console.log(err)
        options.onError(err)
    });
}

const videoProps: UploadProps = {
    name: 'file',
    action: '',
    headers: {
        'Content-Type': 'multipart/form-data;charset=UTF-8',
    },
    customRequest: videoUpload
}

/**
 * 上传图片
 * @param options
 */
const imageUpload = (options: any) => {
    console.log(options.file)
    let formData = new FormData();
    formData.append("file", options.file);

    const data: PostType.PostPhotoRequest = {
        biz: 'user_video_cover',
        file: formData.get("file")
    }

    uploadImage(data).then(res => {
        query.videoThumbnailUrl = res.data;
        options.onSuccess(res, options.file);
    }).catch(err => {
        console.log(err)
        options.onError(err)
    });
}

const imageProps: UploadProps = {
    name: 'file',
    action: '',
    headers: {
        'Content-Type': 'multipart/form-data;charset=UTF-8',
    },
    customRequest: imageUpload
}




/**
 * 创建数据模态框
 * @param props
 * @constructor
 */
const UpdateModal: React.FC<PropsWithChildren<CreateModalProps>> = (props) => {
    let { modalVisible, onCancel ,onInitData,videoData} = props;

    /**
     * 创建
     * @param fields
     */
    const doAdd = async (fields: VideoType.VideoAddRequest) => {
        const hide = message.loading('正在提交');
        try {
            if(query.videoThumbnailUrl===""){
                query.videoThumbnailUrl = videoData.picUrl;
            }
            if(query.videoFileUrl===""){
                query.videoFileUrl = videoData.videoUrl
            }
            query.text = fields.text;
            await addVideo(query);
            await onInitData()
            onCancel()
            message.success('编辑成功');

        } catch (e: any) {
            message.error('编辑失败，请重试！', e.message);
        } finally {
            hide();
        }
    };

    return (
        <Modal
            destroyOnClose={true}
            title="编辑视频"
            visible={modalVisible}
            onCancel={() => onCancel()}
            footer={null}
        >
            <ProForm<VideoType.VideoAddRequest>
                onFinish={async (values) => {
                    await doAdd(values);
                }}

                requiredMark={false}
                labelAlign="left"
                labelCol={{
                    xs: 24,
                    sm: 4,
                    md: 3,
                    xl: 2,
                }}
                wrapperCol={{
                    xs: 24,
                    sm: 20,
                    md: 16,
                    xl: 14,
                }}
                submitter={{
                    submitButtonProps: {
                        style: {
                            minWidth: 160,
                        },
                    },
                    render: (props, dom) => [...dom.reverse()],
                }}
            >

                {/*<ProFormText*/}
                {/*    name="picUrlShow"*/}
                {/*    label="封面地址"*/}
                {/*    initialValue={videoData.picUrl}*/}
                {/*/>*/}

                {/*<ProFormText*/}
                {/*    name="videoUrlShow"*/}
                {/*    label="视频地址"*/}
                {/*    initialValue={videoData.videoUrl}*/}
                {/*/>*/}

                <ProFormUploadButton
                    label="上传修改封面"
                    max={1}
                    fieldProps={{
                        ...imageProps,
                    }}
                />

                <ProFormUploadButton
                    label="上传修改视频"
                    max={1}
                    fieldProps={{
                        ...videoProps,
                    }}
                />

                <ProFormTextArea
                    name="text"
                    label="视频简介"
                    required
                    fieldProps={{
                        autoSize: {minRows: 4},
                    }}
                    rules={[{required: true, message: '需填写个人介绍'}]}
                    initialValue={videoData.text}
                />
            </ProForm>
        </Modal>
    );
};

export default UpdateModal;
